<p ng-if="!loaded">Loading...</p>

<div ng-if="emptyCategory && loaded" class="empty-state-message empty-state-full-page">
  <h2 class="text-center">No images or templates.</h2>

  <p class="gutter-top">
    No images or templates are loaded for the category {{category.label}}.
  </p>

  <p>
    To add an image stream or template from a file, use the editor in the
    <strong>Import YAML / JSON</strong> tab, or run the following command:
    <div><code>oc create -f &lt;filename&gt; -n {{projectName}}</code></div>
  </p>

  <p><a ng-href="project/{{projectName}}/create">Back to catalog</a></p>
</div>

<div ng-if="loaded && !emptyCategory && !catalog.subcategories">
  <form role="form" fit class="search-pf has-button mar-bottom-xl">
    <div class="form-group has-clear">
      <!-- Add a hidden label for screen readers. -->
      <div class="search-pf-input-group">
        <label for="search" class="sr-only">Filter by name or description</label>
        <input
           ng-model="filter.keyword"
           type="search"
           id="search"
           placeholder="Filter by name or description"
           class="search-input form-control"
           autocorrect="off"
           autocapitalize="none"
           spellcheck="false">
         <button
           type="button"
           class="clear"
           aria-hidden="true"
           ng-if="filter.keyword"
           ng-click="filter.keyword = ''">
           <span class="pficon pficon-close"></span>
         </button>
       </div>
    </div>
  </form>

  <div ng-if="!filteredBuilderImages.length && !filteredTemplates.length && loaded" class="empty-state-message text-center h2">
    All content is hidden by the current filter.
    <a href="" ng-click="filter.keyword = ''" role="button" class="nowrap">Clear Filter</a>
  </div>

  <div class="row row-cards-pf row-cards-pf-flex mar-top-xl">
    <catalog-image
      image-stream="builder"
      project="{{projectName}}"
      is-builder="true"
      keywords="keywords"
      ng-repeat="builder in filteredBuilderImages track by (builder | uid)">
    </catalog-image>
    <catalog-template
      template="template"
      project="{{projectName}}"
      keywords="keywords"
      ng-repeat="template in filteredTemplates | orderBy : ['metadata.name', 'metadata.namespace'] track by (template | uid)">
    </catalog-template>
  </div><!-- /row-cards-pf -->
</div><!-- /!emptyCategory -->
